<template>
	<el-form size="large" class="register-content-form" :model="state.ruleForm" :rules="rules">
		<el-form-item class="register-animation1" prop="name">
			<el-input type="text" :placeholder="$t('message.idCard.placeholder1')" v-model="ruleForm.name" clearable autocomplete="off">
          <template #prefix>
					<el-icon class="el-input__icon"><ele-User /></el-icon>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="register-animation2" prop="identification">
				<el-input type="text" maxlength="18" :placeholder="$t('message.idCard.placeholder2')" v-model="ruleForm.identification" clearable autocomplete="off">
					<template #prefix>
						<el-icon class="el-input__icon"><ele-Position /></el-icon>
					</template>
				</el-input>
		</el-form-item>
    <el-form-item class="register-animation3" prop="mobile">
			<el-input type="text" :placeholder="$t('message.idCard.placeholder3')" v-model="ruleForm.mobile" clearable autocomplete="off">
				<template #prefix>
					<i class="iconfont icon-dianhua el-input__icon"></i>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="register-animation4">
			<el-button round type="primary" class="register-content-submit" @keyup.enter="LastClick" @click="LastClick">
				<span>{{ $t('message.idCard.btnText1') }}</span>
			</el-button>
      <el-button round type="primary" class="Sign-content-submit" @keyup.enter="RegisterClick" @click="RegisterClick">
				<span>{{ $t('message.idCard.btnText2') }}</span>
			</el-button>
		</el-form-item>
  </el-form>
</template>

<script lang="ts">
import { toRefs, reactive, defineComponent } from 'vue';
import {useRouter} from "vue-router";
import {FormRules} from "element-plus";
import axios from 'axios';
import { errorMessage, successMessage} from "/@/utils/message";
import { getCanAccessOHIF } from '/@/views/system/register/api';


export default defineComponent({
	name: 'IdCard',
  props: {
    sharedState: {
      type: Object,
      default: () => ({}),
    },
  },
	setup(props, { emit }) {
    const router = useRouter();
    const state = reactive({
			ruleForm: {
				name: '',
				identification: '',
        mobile: '',
			},
		});
  const rules = reactive<FormRules>({
			name: [
				{
          required: false,
          message: '请填写姓名',
          trigger: 'blur'
        },
			],
			identification: [
				{
					required: true,
					message: '请填写身份证号',
					trigger: 'blur',
				},
        {
          pattern: /^(^[1-9]\d{5}\d{4}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[X])$)$/,
          message: '请输入正确的身份证号',
          trigger: 'blur'
        }
			],
      mobile: [
				{
					required: true,
					message: '请填写手机号',
					trigger: 'blur',
				},
        {
          pattern: /^(1[3-9])\d{9}$/,
          message: '请输入正确的手机号码',
          trigger: 'blur'
        },
			],
		})
     const LastClick = async () => {
      emit('switch-tab', 'accountPassword');
		};
    const phoneRegex = /^(1[3-9])\d{9}$/;
    const regex = /^(^[1-9]\d{5}\d{4}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[X])$)$/;
    const RegisterClick = () => {
      if(!state.ruleForm.name){
        errorMessage("请输入姓名");
      }
      else if(!state.ruleForm.identification){
        errorMessage("请输入身份证号");
      }
      else if(!regex.test(state.ruleForm.identification)){
        errorMessage("请输入正确的身份证号");
      }
      else if(!state.ruleForm.mobile){
        errorMessage("请输入手机号")
      }
      else if(!phoneRegex.test(state.ruleForm.mobile)){
        errorMessage("请输入正确的手机号")
      }
      else{
        const user = {
          ...props.sharedState, // 包含 username 和 password
          ...state.ruleForm, // 包含 name, identification, mobile
        };
        axios.post("http://127.0.0.1:8000/api/system/user/",user);
        successMessage("注册成功")
        router.push('/login');
      }
      //添加注册函数

		};
		return {
      LastClick,
      RegisterClick,
      state,
      rules,
			...toRefs(state),
		};
	},
});
</script>

<style scoped lang="scss">
.register-content-form {
	margin-top: 20px;
	@for $i from 1 through 4 {
		.register-animation#{$i} {
			opacity: 0;
			animation-name: error-num;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			animation-delay: calc($i/10) + s;
		}
	}
	.register-content-code {
		width: 100%;
		padding: 0;
	}
	.register-content-submit {
		width: 48%;
		letter-spacing: 2px;
		font-weight: 300;
		margin-top: 15px;
	}
  .Sign-content-submit {
		width: 48%;
		letter-spacing: 2px;
		margin-top: 15px;
	}
}
</style>
